<template>
  <div class="thermometer-container">
    <div class="thermometer">
      <svg width="200" height="200">
        <circle cx="100" cy="100" r="80" fill="none" stroke="#ddd" stroke-width="10" />
        <circle cx="100" cy="100" r="80" fill="none" :stroke="color" stroke-width="10" :stroke-dasharray="circumference"
          :stroke-dashoffset="strokeOffset" transform="rotate(-90 100 100)" />
      </svg>
      <div class="temperature-value">{{ temperature }}°C</div>
    </div>
    <div class="temperature-range">
      最低温度：{{ minTemp }}°C，最高温度：{{ maxTemp }}°C
    </div>
  </div>
</template>

<script>
export default {
  name: "CircularThermometer",
  props: {
    temperature: {
      type: Number,
      required: true,
    },
    minTemp: {
      type: Number,
      default: 0,
    },
    maxTemp: {
      type: Number,
      default: 100,
    },
    color: {
      type: String,
      default: "#ff5252",
    },
  },
  computed: {
    circumference() {
      const radius = 80;
      return 2 * Math.PI * radius;
    },
    strokeOffset() {
      const percentage = (this.temperature - this.minTemp) / (this.maxTemp - this.minTemp);
      return this.circumference - percentage * this.circumference;
    },
  },
};
</script>

<style scoped>
.thermometer-container {
  text-align: center;
  padding: 20px;
}

.thermometer {
  position: relative;
  display: inline-block;
}

.temperature-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
}

.temperature-range {
  margin-top: 20px;
  color: #ffffff;
}
</style>